/* eslint-disable no-unused-vars */
import React, { memo } from "react";
import { View } from "@tarojs/components";
import RecipeCard from "@/components/RecipeCard";
import { Loading } from "@antmjs/vantui";
import { themeColor } from "@/utils/config";
import "./index.less";

const Index = (props) => {
  const { listRight, listLeft, handleClickTab, isFlowing } = props;
  return (
    <View className='waterfall-list'>
      <View className='main'><View className='list list-left'>
        {listLeft.map((item) => {
          return (
            <View onClick={() => { handleClickTab('recipe', item.recipe_id) }} key={item.recipe_id}>
              <RecipeCard data={item} />
            </View>
          );
        })}
      </View>
        <View className='list list-right'>
          {listRight.map((item) => {
            return (
              <View onClick={() => { handleClickTab('recipe', item.recipe_id) }} key={item.recipe_id}>
                <RecipeCard data={item} />
              </View>
            );
          })}
        </View>
      </View>
      {listLeft.length === 0 || listRight.length === 0?
      <View className='block'></View>
      :null}
      {isFlowing ? <View className='loading'>
        <Loading color={themeColor} size='28px' />
      </View> : null}
    </View>
  );
};

export default memo(Index);
